<template>
  <view>
      <swiper v-if="bannerList.length > 0" class="swiper" circular :current="current"  :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" indicator-color="#FFFFFF;" indicator-active-color="#FFFFFF">
      	<swiper-item v-for="(item,index) in bannerList" :key="index" @tap="handleToShow(item)">
			<view>
				<image class="swiper-image" mode="scaleToFill" :src="item.picture" @error="imageError"></image>
			</view>
      	</swiper-item> 
      </swiper>
  </view>
</template>
<script>
  import { getIndexBannerWithoutLogin } from '@/api/youhu/user/index/userIndex'
  export default
  {
    // 轮播图组件
    name: 'yh-swiper',
    // 组件
    components:
    {
    },
	//属性
    props:
    {
		bannerListArray:{
			type:Array,
			default:function()
			{
				return [
				  {
					picture:"https://api.youhujun.com/storage/admin/file/1/picture/beautiful001.jpg"  
				  },
				  {
					picture:"https://api.youhujun.com/storage/admin/file/1/picture/beautiful001.jpg"  
				  },
				  {
					picture:"https://api.youhujun.com/storage/admin/file/1/picture/beautiful001.jpg"  
				  }
				] 
			}
		}
    },
    // 数据
    data()
    {
        return {
          msg: '轮播图组件',
		  // 当前索引
		  current:0,
		  // 显示指示点
		  indicatorDots: true,
		  // 是否自动播放
		  autoplay: true,
		  // 自动切换间隔时间
		  interval: 2000,
		  // 滑动动画时长
		  duration: 500,
		  // 轮播图容器
		 bannerList:[
			 {
				picture:"https://api.youhujun.com/storage/admin/file/1/picture/beautiful001.jpg"  
			  },
			  {
			  	picture:"https://api.youhujun.com/storage/admin/file/1/picture/beautiful001.jpg"  
			  },
			  {
			  	picture:"https://api.youhujun.com/storage/admin/file/1/picture/beautiful001.jpg"  
			  }
		  ] 
        }
    },
    // 计算属性
    computed:
    {

    },
    // 监听
    watch:
    {

    },
    // 实例创建之前
    beforeCreate()
    {

    },
    // 创建
    created()
    {

    },
    // 挂载之前
    beforeMount()
    {

    },
    // 挂载 
    mounted()
    {
		//console.log(this.bannerListArray)
		//获取首页轮播图
		this.bannerList = this.bannerListArray
		
    },
    // 更新之前
    beforeUpdate()
    {

    },
    // 跟新后
    updated()
    {

    },
    // 销毁之前
    beforeDestroy()
    {

    },
    // 销毁后
    destroyed()
    {

    },
    // 方法
    methods:
    {
		// 图片加载错误
		imageError: function(e) 
		{
		    console.error('image发生error事件，携带值为' + e.detail.errMsg)
		},
		//查看元素
		handleToShow(item)
		{
			console.log(item)
		}
		
    }
  }
</script>
<style lang='scss' scoped>
	.swiper{
		width:694rpx;
		height:360rpx;
		margin:0 auto;
		.swiper-image{
			width:694rpx;
			height:360rpx;
			border-radius: 20.72rpx;
		}
	}
</style>
